<!-- 用户统计 -->
<template>
    <div class="userRecord">
        <header>用户统计</header>
        <!-- 条件筛选 -->
        <div class="screen">
            <div class>
                <span class="demonstration">时间：</span>
                <el-date-picker
                    v-model="screen.time"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    @change="getList"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </div>
            <div class style="float:right">
                <span class="demonstration">平台：</span>
                <el-select
                    @change="getList(1)"
                    v-model="screen.platform"
                    filterable
                    placeholder="请选择平台"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </div>
            <!-- <div class="btns">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

                <el-button icon="el-icon-refesh" size="mini" @click="resetQuery">重置</el-button>
            </div>-->
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" max-height="500" min-height="200" border style="width: 100%">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="addCount" label="新增"></el-table-column>
            <el-table-column prop="total" label="累计"></el-table-column>
        </el-table>
        <!-- <pagination v-show="screen.total > 0" :total="screen.total" :page.sync="screen.pageNum" :limit.sync="screen.pageSize" @pagination="getList" /> -->
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getPlat, getUserCount } from '@/api/dateCenter';

export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'userRecord',
    components: {},
    data() {
        //这里存放数据
        return {
            // 筛选数据
            // 用户统计
            screen: {
                time: '', // 时间
                platform: '全部平台' // 平台
            },
            options: [

            ],
            tableData: []
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 搜索
        handleQuery() {},
        // 重置
        resetQuery() {},
        /** 查询申请额度记录列表 */
        getList(num) {
            if (num) {
                let datas = {

                    plat: ''
                };
                if (this.screen.time != null) {
                    datas.startTime = this.screen.time[0];
                    datas.endTime = this.screen.time[1];
                }
                if (this.screen.platform == '全部平台') {
                    datas.plat = null;
                } else {
                    datas.plat = this.screen.platform;
                }
                getUserCount(datas).then(res => {
                    if (res.code == 200) {
                        (this.tableData = [
                            {
                                name: '用户对接量',
                                addCount: res.data.用户对接量.addCount,
                                total: res.data.用户对接量.total
                            },
                            {
                                name: '用户注册量',
                                addCount: res.data.用户注册量.addCount,
                                total: res.data.用户注册量.total
                            },
                            {
                                name: '用户认证量',
                                addCount: res.data.用户认证量.addCount,
                                total: res.data.用户认证量.total
                            }
                        ]),
                            console.log(this.tableData);
                    } else {
                        this.tableData = [];
                    }
                });
            } else {
                getUserCount().then(res => {
                    if (res.code == 200) {
                        (this.tableData = [
                            {
                                name: '用户对接量',
                                addCount: res.data.用户对接量.addCount,
                                total: res.data.用户对接量.total
                            },
                            {
                                name: '用户注册量',
                                addCount: res.data.用户注册量.addCount,
                                total: res.data.用户注册量.total
                            },
                            {
                                name: '用户认证量',
                                addCount: res.data.用户认证量.addCount,
                                total: res.data.用户认证量.total
                            }
                        ]),
                            console.log(this.tableData);
                    } else {
                        this.tableData = [];
                    }
                });
            }
        },
        // 获取平台
        getPlats() {
            getPlat().then(res => {
                this.options = res.data;
                this.options.unshift({
                    id: null,
                    name: '全部平台'
                });
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getPlats();
        this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* //@import url(); 引入公共css类 */
.userRecord {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    margin: 20px;
    border-radius: 4px;
    header {
        width: 100%;
        height: 40px;
        font-size: 18px;
        line-height: 26px;
        padding: 0 0 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #333;
        font-weight: 600;
    }
    .screen {
        overflow: hidden;
        margin-top: 20px;
        height: auto;
        > div {
            float: left;
            margin: 0 20px 20px 0;
        }
        > div:nth-child(2) {
            margin: 0;
        }
        .btns {
            margin: 4px 0 20px 0;
        }
    }
}
</style>
